<template>
  <div :class="isFull ? 'risk' : 'risk riskNotFull'">
    <div class="riskTop">
      <div class="riskTopLeft">
        <div class="outTitles">
          企业风险总数
          <div class="outTitlesNum">
            <span>{{ companyRiskTotal }}</span
            >个
          </div>
        </div>
        <div class="innerBox">
          <div class="levels">
            <div class="levelsTitle">风险等级</div>
            <el-row class="riskLevels" v-if="companyRiskLevel.length">
              <el-col
                :span="8"
                class="riskLevelsItems"
                v-for="(item, index) in companyRiskLevel"
                :key="index"
              >
                <div class="imgs" v-if="index == 0">
                  <img :src="require('@/assets/ylChart/risk1.png')" alt="" />
                </div>
                <div class="imgs" v-if="index == 1">
                  <img :src="require('@/assets/ylChart/risk2.png')" alt="" />
                </div>
                <div class="imgs" v-if="index == 2">
                  <img :src="require('@/assets/ylChart/risk3.png')" alt="" />
                </div>
                <div class="name">{{ item.riskLevelStr }}</div>
                <div class="num">{{ item.riskLevelNum }}</div>
              </el-col>
            </el-row>
            <el-row class="riskLevels" v-else>
              <el-col :span="8" class="riskLevelsItems">
                <div class="imgs">
                  <img :src="require('@/assets/ylChart/risk1.png')" alt="" />
                </div>
                <div class="name">黄色风险</div>
                <div class="num">52</div>
              </el-col>
              <el-col :span="8" class="riskLevelsItems">
                <div class="imgs">
                  <img :src="require('@/assets/ylChart/risk2.png')" alt="" />
                </div>
                <div class="name">橙色风险</div>
                <div class="num">28</div>
              </el-col>
              <el-col :span="8" class="riskLevelsItems">
                <div class="imgs">
                  <img :src="require('@/assets/ylChart/risk3.png')" alt="" />
                </div>
                <div class="name">红色色风险</div>
                <div class="num">12</div>
              </el-col>
            </el-row>
          </div>
          <div class="event">
            <div class="eventTitle">事件分布</div>
            <ul>
              <li v-for="(item, index) in eventList" :key="index">
                <div class="chartPics">
                  <span
                    class="chartPicsNum"
                    :style="'height:92%'"
                    v-if="item.riskEventNum == eventMax"
                    >{{ item.riskEventNum }}</span
                  >
                  <span
                    class="chartPicsNum"
                    :style="`height:${
                      parseInt((item.riskEventNum * 80) / eventMax) + 12
                    }%`"
                    v-else
                    >{{ item.riskEventNum }}</span
                  >
                  <img
                    class="chartPicsImg"
                    :style="'bottom:77%'"
                    v-if="item.riskEventNum == eventMax"
                    :src="require('@/assets/ylChart/eventTop.png')"
                    alt=""
                  />
                  <img
                    class="chartPicsImg"
                    :style="`bottom:${
                      parseInt((item.riskEventNum * 80) / eventMax) - 3
                    }%`"
                    v-else
                    :src="require('@/assets/ylChart/eventTop.png')"
                    alt=""
                  />
                  <div
                    class="chartPicsBar"
                    :style="'height:80%'"
                    v-if="item.riskEventNum == eventMax"
                  ></div>
                  <div
                    class="chartPicsBar"
                    :style="`height:${parseInt(
                      (item.riskEventNum * 80) / eventMax
                    )}%`"
                    v-else
                  ></div>
                </div>
                <div class="chartTitles">
                  {{ item.riskEventStr }}
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="riskTopMid">
        <div id="maps" style="height: 500px"></div>
      </div>
      <div class="riskTopRight">
        <div class="outTitles">
          项目预警总数
          <div class="outTitlesNum">
            <span>{{ riskTotal }}</span
            >个
          </div>
        </div>
        <div class="innerBox">
          <div class="levels">
            <div class="levelsTitle">状态分布</div>
            <el-row class="riskLevels">
              <el-col :span="11" class="riskLevelsItems">
                <div class="titles">未处理</div>
                <div class="numbers">{{ handleTatol }}</div>
              </el-col>
              <el-col :span="11" :offset="2" class="riskLevelsItems">
                <div class="titles">处理中</div>
                <div class="numbers orange">{{ handledTatol }}</div>
              </el-col>
            </el-row>
          </div>
          <div class="event">
            <div class="eventTitle">类型分布</div>
            <swiper
              ref="typesSwiper"
              style="height: 280px"
              class="ul"
              :options="typesSwiperOption"
            >
              <swiper-slide
                v-for="(item, index) in typeList"
                :key="index"
                class="li"
              >
                <div class="chartPics">
                  <span
                    class="chartPicsNum chartPicsNum1"
                    style="height: 95%"
                    v-if="item.num == typeMax"
                    >{{ item.num }}</span
                  >
                  <span
                    class="chartPicsNum"
                    :style="`height:${
                      parseInt((item.num * 80) / typeMax) + 15
                    }%`"
                    v-else
                    >{{ item.num }}</span
                  >
                  <img
                    class="chartPicsImg"
                    :style="'bottom:75.5%'"
                    v-if="item.num == typeMax"
                    :src="require('@/assets/ylChart/typeTop.png')"
                    alt=""
                  />
                  <img
                    class="chartPicsImg"
                    :style="`bottom:${
                      parseInt((item.num * 80) / typeMax) - 4.5
                    }%`"
                    v-else
                    :src="require('@/assets/ylChart/typeTop.png')"
                    alt=""
                  />
                  <div
                    class="chartPicsBar"
                    :style="'height:80%'"
                    v-if="item.num == typeMax"
                  ></div>
                  <div
                    class="chartPicsBar"
                    :style="`height:${parseInt((item.num * 80) / typeMax)}%`"
                    v-else
                  ></div>
                </div>
                <div class="chartTitles">
                  {{ item.name }}
                </div>
              </swiper-slide>
            </swiper>
          </div>
        </div>
      </div>
    </div>
    <div class="riskBot">
      <el-row class="riskBotTitle">
        <el-col :span="11" class="outTitles">
          行业风险排名
          <div class="outTitlesNum">
            <span>企业</span
            ><img :src="require('@/assets/ylChart/downArrow.png')" alt="" />
          </div>
        </el-col>
        <el-col :span="11" :offset="2" class="outTitles">
          <div class="outTitlesNum">
            <span>项目</span
            ><img :src="require('@/assets/ylChart/downArrow.png')" alt="" />
          </div>
        </el-col>
      </el-row>
      <ul class="riskBotRanges">
        <li class="riskBotRangesItem">
          <swiper
            ref="mySwiper"
            v-if="companyList.length"
            style="height: 160px"
            class="riskBotRangesItemsBox"
            :options="swiperOption"
          >
            <swiper-slide
              v-for="(item, index) in companyList"
              :key="index"
              class="riskBotRangesItems"
            >
              <div class="items numImg">
                <img
                  :src="require(`@/assets/ylChart/num${index + 1}.png`)"
                  alt=""
                  v-if="index < 4"
                />
                <div v-else class="images">
                  <img :src="require('@/assets/ylChart/num5.png')" alt="" />
                  <span>{{ index + 1 }}</span>
                </div>
              </div>
              <div class="items name">
                {{ item.industryName }}
              </div>
              <div class="items risks">风险数：{{ item.riskIndustryNum }}</div>
              <div class="items present">
                比例：{{ item.riskIndustryRate }}%
              </div>
            </swiper-slide>
          </swiper>
        </li>
        <li class="riskBotRangesItem">
          <swiper
            ref="mySwiper"
            v-if="TypeList.length"
            style="height: 160px"
            class="riskBotRangesItemsBoxR"
            :options="swiperOption"
          >
            <swiper-slide
              v-for="(item, index) in TypeList"
              :key="index"
              class="riskBotRangesItems"
            >
              <div class="items numImg">
                <img
                  :src="require(`@/assets/ylChart/num${index + 1}.png`)"
                  alt=""
                  v-if="index < 4"
                />
                <div v-else class="images">
                  <img :src="require('@/assets/ylChart/num5.png')" alt="" />
                  <span>{{ index + 1 }}</span>
                </div>
              </div>
              <div class="items name">
                {{ item.name }}
              </div>
              <div class="items risks">风险数：{{ item.num }}</div>
              <div class="items present">比例：{{ item.percent }}</div>
            </swiper-slide>
          </swiper>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

export default {
  data() {
    return {
      swiperOption: {
        loop: true,
        slidesPerView: 4,
        direction: 'vertical',
        autoplay: true,
      },
      typesSwiperOption: {
        loop: false,
        slidesPerView: 8,
      },
      companyRiskTotal: 0, //企业风险总数
      companyRiskLevel: [], //风险等级
      riskTotal: 0,
      handleTatol: 0,
      handledTatol: 0,
      eventList: [],
      typeList: [],
      companyList: [],
      TypeList: [],
    }
  },
  components: {
    swiper,
    swiperSlide,
  },
  props: ['isFull'],
  computed: {
    eventMax() {
      return this.eventList.sort(this.handle('riskEventNum'))[0].riskEventNum
    },
    typeMax() {
      return this.typeList.sort(this.handle('num'))[0].num
    },
  },
  created() {
    this.$nextTick(() => {
      this.getAreaRisk()
    })

    this.getRiskTotal()
    this.getRiskLevel()
    this.getEventList()
    this.industryRiskList()
    this.init()
  },
  methods: {
    //地区风险预警
    getAreaRisk() {
      this.axios.post('api-c/company/risk/stats/area/rate').then((res) => {
        if (!res.data.hasError) {
          this.drawMap('maps', res.data.result)
        }
      })
    },
    //企业风险总数
    getRiskTotal() {
      this.axios.post('api-c/company/risk/stats/data').then((res) => {
        if (!res.data.hasError) {
          this.companyRiskTotal = res.data.result.companyRiskTotal
        }
      })
    },
    //风险等级
    getRiskLevel() {
      this.axios.post('api-c/company/risk/stats/level').then((res) => {
        if (!res.data.hasError) {
          this.companyRiskLevel = res.data.result
        }
      })
    },
    //事件分布
    getEventList() {
      this.axios.post('api-c/company/risk/stats/event').then((res) => {
        if (!res.data.hasError) {
          this.eventList = res.data.result
        }
      })
    },
    //行业风险排名
    industryRiskList() {
      this.axios.post('api-c/company/risk/stats/industry').then((res) => {
        if (!res.data.hasError) {
          this.companyList = res.data.result
        }
      })
    },
    init() {
      this.axios
        .post('api-s/cs/alertStats/base/alertStatsCount')
        .then((res) => {
          if (!res.data.hasError) {
            this.riskTotal = res.data.result.total
            this.handleTatol = res.data.result.handleTatol
            this.handledTatol = res.data.result.handledTatol
            this.typeList = res.data.result.typeArray.sort(this.handle('num'))
            this.TypeList = res.data.result.industryIdSArray.sort(
              this.handle('num')
            )
          }
        })
    },
    handle(property) {
      return function (a, b) {
        const val1 = a[property]
        const val2 = b[property]
        return val2 - val1
      }
    },
    drawMap(id, dataa) {
      let that = this
      let datas = []
      dataa.forEach((item) => {
        datas.push({ name: item.areaName, value: item.riskCompanyNum })
      })
      console.log(datas)
      let func = (p) => {
        console.log(p)
        let str = `区域名称：${p.name}<br>`
        str += `风险数量:${p.value}<br>`
        return str
      }
      var optionMap = {
        backgroundColor: '#FFFFFF',
        //左侧小导航图标
        tooltip: {
          trigger: 'item',
          formatter: func,
        },
        visualMap: {
          min: 0,
          max: 100,
          text: ['高风险', '低风险'],
          x: 'left',
          y: 'bottom',
          realtime: false,
          calculable: true,
          inRange: {
            color: ['#09981C', '#d4ed05', '#C62625'],
          },
          inverse: true,
          textStyle: {
            color: '#fff',
          },
        },
        backgroundColor: 'transparent',

        //配置属性
        series: [
          {
            name: '数据',
            type: 'map',
            map: '夷陵区',
            zoom: 1.2,
            // 去掉拖拽
            roam: true,
            itemStyle: {
              normal: {
                color: '#fff',
                borderColor: '#6DEFFF',
                areaColor: 'transparent',
                areaStyle: { areaColor: 'transparent', color: '#fff' },
                textStyle: {
                  color: '#fff', //省份字体颜色
                },
              },
            },
            label: {
              normal: {
                position: 'center',
                show: true, //省份名称
                textStyle: {
                  color: '#FFF',
                },
              },
              emphasis: {
                show: false,
              },
            },
            data: datas, //数据
          },
        ],
        // scaleLimit:{                       //所属组件的z分层，z值小的图形会被z值大的图形覆盖
        //     min:0.7,                          //最小的缩放值
        //     max:1.3,                            //最大的缩放值
        // }
      }

      var hosts = window.location.host
      var protocol = document.location.protocol
      let host
      if (hosts.indexOf('localhost') != -1) {
        host = protocol + '//' + hosts + '/static/'
      } else {
        host = window.location.pathname + 'static/'
      }
      let url = ''

      url = `js/json/420506.json`

      that.axios.get(host + url).then((res) => {
        if (res) {
          echarts.registerMap('夷陵区', res.data)
          let mapChart = echarts.init(document.getElementById(id))
          mapChart.setOption(optionMap)
          window.addEventListener('resize', () => {
            mapChart.resize()
          })
        } else {
          that.drawMap(id)
        }
      })
    },
  },
}
</script>
<style lang="less" scoped>
.risk {
  height: 100%;
  background: rgba(1, 19, 67, 0.4);
  &Top {
    color: #09981c;
    height: 69%;
    vertical-align: top;
    .riskTopLeft,
    .riskTopRight {
      padding: 8px 7px 8px;
      vertical-align: top;
      display: inline-block;
      width: 30%;
      height: 100%;
      background: url('./../../assets/ylChart/boxShow.png') center center
        no-repeat;
      background-size: 100% 100%;
      .outTitles {
        height: 54px;
        line-height: 54px;
        font-size: 20px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        padding-left: 25px;
        color: #5bfcf4;
        background: url('./../../assets/ylChart/titleBg.png') left center
          no-repeat;
        background-size: 70% 100%;
        position: relative;
        .outTitlesNum {
          position: absolute;
          top: 0;
          right: 30px;
          bottom: 0;
          width: 150px;
          line-height: 54px;
          text-align: right;
          font-size: 18px;
          color: #ffc30d;
          span {
            font-size: 30px;
            font-family: Digital-7 Mono;
          }
        }
      }
      .innerBox {
        height: calc(100% - 54px);
      }
      .levels {
        height: 35%;
        &Title {
          padding: 20px 20px 20px 55px;
          color: #1ac9ff;
          font-size: 18px;
          line-height: 22px;
          background: url('./../../assets/ylChart/leftArrow.png') 30px center
            no-repeat;
          background-size: 14px 20px;
        }
        .riskLevels {
          height: calc(100% - 62px);
          &Items {
            color: #fff;
            text-align: center;
          }
        }
      }
      .event {
        height: 62%;
        &Title {
          padding: 20px 20px 20px 55px;
          color: #1ac9ff;
          font-size: 18px;
          line-height: 22px;
          background: url('./../../assets/ylChart/leftArrow.png') 30px center
            no-repeat;
          background-size: 14px 20px;
        }
        ul {
          height: calc(100% - 62px);
          padding: 0 30px;
          li {
            height: 100%;
            display: inline-block;
            vertical-align: top;
            width: 16%;
            text-align: center;
            cursor: pointer;
            .chartPics {
              height: 59%;
              width: 16px;
              margin: 0 auto;
              background-color: rgba(0, 255, 255, 0.08);
              position: relative;
              .chartPicsImg {
                position: absolute;
                left: 0;
                right: 0;
                width: 16px;
              }
              .chartPicsBar {
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                background: linear-gradient(0deg, #04cfd6 0%, #8d0f0f 100%);
                &::after {
                  position: absolute;
                  left: 0;
                  top: 0;
                  content: '';
                  width: 16px;
                  height: 8px;
                  background-color: #04cfd6;
                  border-radius: 0 0 9px 9px;
                }
              }
              .chartPicsNum {
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                font-size: 12px;
                color: #fff;
              }
            }
            .chartTitles {
              margin: 0 auto;
              height: 39%;
              width: 16px;
              font-size: 14px;
              line-height: 14px;
              padding-top: 15px;
              color: #1ac9ff;
            }
          }
        }
      }
    }
    .riskTopLeft {
      .riskLevels {
        padding: 0 30px;
        .riskLevelsItems {
          .imgs {
            width: 89px;
            height: 93px;
            margin: 0 auto;
            position: relative;
            img {
              width: 100%;
              vertical-align: middle;
            }
          }
          .name {
            height: 20px;
            line-height: 20px;
            margin-top: 18px;
            font-size: 16px;
            font-weight: 500;
            color: #fff;
          }
          .num {
            height: 18px;
            line-height: 18px;
            margin-top: 18px;
            font-size: 16px;
            font-weight: 500;
            color: #fff;
          }
        }
      }
    }
    .riskTopRight {
      .levels {
        height: 30%;
        .riskLevels {
          padding: 0 30px;
          .riskLevelsItems {
            height: 100%;
            background: url('./../../assets/ylChart/typeRange.png') center
              center no-repeat;
            background-size: 100% 100%;
            padding-top: 5px;
            cursor: pointer;
            .titles {
              height: 50%;
              line-height: 3.5;
              text-align-last: left;
              padding-left: 30px;
              font-size: 19px;
            }
            .numbers {
              height: 50%;
              line-height: 1.5;
              font-size: 30px;
              color: #eb3421;
              font-weight: bold;
            }
            .orange {
              color: #fbdc0d;
            }
          }
        }
      }
      .event {
        height: 69%;
      }
      .ul {
        height: calc(100% - 42px);
        padding: 0 30px;
        .li {
          height: 100%;
          display: inline-block;
          vertical-align: top;
          text-align: center;
          cursor: pointer;
          .chartPics {
            height: 45%;
            width: 16px;
            margin: 0 auto;
            background-color: rgba(0, 255, 255, 0.08);
            position: relative;
            .chartPicsImg {
              position: absolute;
              left: 0;
              right: 0;
              width: 16px;
            }
            .chartPicsBar {
              position: absolute;
              left: 0;
              right: 0;
              bottom: 0;
              background: linear-gradient(0deg, #1a80ff 0%, #28f7e1 100%);
              &::after {
                position: absolute;
                left: 0;
                top: 0;
                content: '';
                width: 16px;
                height: 8px;
                background-color: #1699d0;
                border-radius: 0 0 9px 9px;
              }
            }
            .chartPicsNum {
              position: absolute;
              left: 0;
              right: 0;
              bottom: 0;
              font-size: 12px;
              color: #fff;
            }
          }
          .chartTitles {
            margin: 0 auto;
            height: 54%;
            width: 16px;
            font-size: 14px;
            line-height: 14px;
            padding-top: 14px;
            color: #1ac9ff;
          }
        }
      }
    }
    .riskTopMid {
      vertical-align: top;
      display: inline-block;
      width: calc(100% - 61%);
      height: 100%;
      #maps {
        margin: 0 auto;
      }
    }
  }
  &Bot {
    height: calc(100% - 69%);
    padding: 9px 8px;
    position: relative;
    background: url('./../../assets/ylChart/boxShowBot.png') center center
      no-repeat;
    background-size: 100% 100%;
    .outTitles {
      height: 54px;
      line-height: 54px;
      font-size: 20px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      padding-left: 25px;
      color: #5bfcf4;
      background: url('./../../assets/ylChart/titleBg.png') left center
        no-repeat;
      background-size: 50% 100%;
      position: relative;
      .outTitlesNum {
        position: absolute;
        top: 0;
        right: 30px;
        bottom: 0;
        width: 150px;
        line-height: 54px;
        text-align: right;
        font-size: 18px;
        color: #ffc30d;
        span {
          font-size: 30px;
          font-family: Digital-7 Mono;
        }
      }
    }
    .riskBotRanges {
      width: 100%;
      height: calc(100% - 54px);
      padding-top: 17px;
      background: url('./../../assets/ylChart/bottomLine.png') center center
        no-repeat;
      background-size: auto 100%;
      &Item {
        width: 49.5%;
        display: inline-block;
        height: 200px;
        overflow: hidden;
        padding: 0 20px;
        position: relative;
        .riskBotRangesItemsBox {
          padding: 0 20px;
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
        }
        .riskBotRangesItemsBoxR {
          padding: 0 20px;
        }
        .riskBotRangesItems {
          height: 50px;
          line-height: 50px;
          padding: 0 16px;
          border-bottom: 1px solid rgba(26, 202, 204, 0.2);
          vertical-align: middle;
          .items {
            display: inline-block;
          }
          .numImg {
            vertical-align: middle;
            width: 33px;
            height: 33px;
            line-height: 33px;
            margin-right: 15px;
            img {
              display: block;
              width: 100%;
              height: 100%;
            }
            .images {
              position: relative;
              width: 25px;
              height: 25px;
              img {
                display: block;
                width: 25px;
                height: 25px;
              }
              span {
                left: 0;
                top: 0;
                right: 0;
                text-align: center;
                font-size: 14px;
                font-family: Source Han Sans CN;
                font-weight: 800;
                color: #052048;
                position: absolute;
                line-height: 30px;
              }
            }
          }
          .name {
            height: 30px;
            line-height: 30px;
            width: 300px;
            background: linear-gradient(
              90deg,
              #16d4c4 0%,
              rgba(22, 212, 196, 0) 100%
            );
            opacity: 0.5;
            padding-left: 55px;
            color: #fff;
            font-size: 18px;
            position: relative;
            &::after {
              position: absolute;
              top: 0;
              left: 0;
              width: 0;
              height: 0;
              content: '';
              border-right: 30px solid transparent;
              border-top: 15px solid #021b46;
              border-bottom: 15px solid transparent;
            }
            &::before {
              position: absolute;
              top: 0;
              left: 0px;
              width: 0;
              height: 0;
              content: '';
              border-right: 30px solid transparent;
              border-top: 15px solid transparent;
              border-bottom: 15px solid #021b46;
            }
          }
          &:nth-child(1) {
            .name {
              background: linear-gradient(
                90deg,
                #b7262a 0%,
                rgba(209, 41, 41, 0) 100%
              );
            }
          }
          &:nth-child(2) {
            .name {
              background: linear-gradient(
                90deg,
                #d97625 0%,
                rgba(217, 118, 37, 0) 100%
              );
            }
          }
          &:nth-child(3) {
            .name {
              background: linear-gradient(
                90deg,
                #ffc349 0%,
                rgba(255, 195, 73, 0) 100%
              );
            }
          }

          .risks {
            height: 18px;
            width: 90px;
            line-height: 18px;
            font-size: 18px;
            color: #fff;
            margin-right: 10%;
          }
          .present {
            height: 18px;
            width: 110px;
            line-height: 18px;
            font-size: 18px;
            color: #fff;
          }
        }
      }
    }
  }
}
.riskNotFull {
  .riskTop {
    height: 69%;
    vertical-align: top;
    .riskTopLeft,
    .riskTopRight {
      padding: 7px 8px;
      background-size: 100% 100%;
      .outTitles {
        height: 40px;
        line-height: 40px;
        font-size: 18px;
        background-size: 70% 100%;
        .outTitlesNum {
          line-height: 40px;
          span {
            font-size: 20px;
          }
        }
      }
      .innerBox {
        height: calc(100% - 40px);
      }
      .levels {
        height: 37%;
        &Title {
          padding: 10px 20px 10px 45px;
          font-size: 16px;
          line-height: 20px;
          background: url('./../../assets/ylChart/leftArrow.png') 20px center
            no-repeat;
          background-size: 12px 16px;
        }
        .riskLevels {
          height: calc(100% - 42px);
        }
      }
      .event {
        &Title {
          padding: 10px 20px 10px 45px;
          font-size: 16px;
          line-height: 20px;
          background: url('./../../assets/ylChart/leftArrow.png') 20px center
            no-repeat;
          background-size: 12px 16px;
        }
        ul {
          height: calc(100% - 42px);
          padding: 0 20px;
          li {
            .chartPics {
              height: 59%;
              width: 12px;
              .chartPicsImg {
                width: 12px;
              }
              .chartPicsBar {
                &::after {
                  width: 12px;
                  height: 6px;
                }
              }
            }
            .chartTitles {
              width: 15px;
              font-size: 12px;
              direction: tb-rl;
            }
          }
        }
      }
    }
    .riskTopLeft {
      .riskLevels {
        padding: 0 20px;
        .riskLevelsItems {
          .imgs {
            width: 85px;
            height: 85px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .name {
            height: 14px;
            line-height: 14px;
            margin-top: 10px;
            font-size: 14px;
          }
          .num {
            height: 14px;
            line-height: 14px;
            margin-top: 10px;
            font-size: 14px;
          }
        }
      }
    }
    .riskTopRight {
      .levels {
        height: 30%;
        .riskLevels {
          padding: 0 20px;
          .riskLevelsItems {
            height: 100px;
            padding: 0;
            .titles {
              height: 50px;
              line-height: 50px;
              padding-left: 30px;
              font-size: 14px;
            }
            .numbers {
              height: 40px;
              line-height: 40px;
              font-size: 20px;
            }
          }
        }
      }
      .event {
        height: 69%;
      }
      .ul {
        .li {
          .chartPics {
            width: 12px;
            .chartPicsImg {
              width: 12px;
            }
            .chartPicsBar {
              &::after {
                width: 12px;
                height: 5px;
              }
            }
          }
          .chartTitles {
            width: 12px;
            font-size: 12px;
            line-height: 14px;
            padding-top: 10px;
          }
        }
      }
    }
  }
  .riskBot {
    height: calc(100% - 69%);
    padding: 8px 7px;
    .outTitles {
      height: 40px;
      line-height: 40px;
      font-size: 18px;
      .outTitlesNum {
        line-height: 40px;
        font-size: 18px;
        span {
          font-size: 20px;
        }
      }
    }
    .riskBotRanges {
      width: 100%;
      height: calc(100% - 54px);
      padding-top: 17px;
      background: url('./../../assets/ylChart/bottomLine.png') center center
        no-repeat;
      background-size: auto 100%;
      &Item {
        width: 49.5%;
        display: inline-block;
        height: 160px;
        .riskBotRangesItemsBox {
          padding: 0 20px;
        }
        .riskBotRangesItemsBoxR {
          padding: 0 20px;
        }
        .riskBotRangesItems {
          height: 40px;
          line-height: 40px;
          padding: 0 16px;
          border-bottom: 1px solid rgba(26, 202, 204, 0.2);
          vertical-align: middle;
          .items {
            display: inline-block;
          }
          .numImg {
            vertical-align: middle;
            width: 25px;
            height: 25px;
            line-height: 25px;
            margin-right: 15px;
            img {
              display: block;
              width: 100%;
              height: 100%;
            }
          }
          .name {
            height: 22px;
            line-height: 22px;
            width: 30%;
            background: linear-gradient(
              90deg,
              #16d4c4 0%,
              rgba(22, 212, 196, 0) 100%
            );
            opacity: 0.5;
            padding-left: 55px;
            color: #fff;
            font-size: 14px;
            position: relative;
            &::after {
              position: absolute;
              top: 0;
              left: 0;
              width: 0;
              height: 0;
              content: '';
              border-right: 22px solid transparent;
              border-top: 11px solid #021b46;
              border-bottom: 11px solid transparent;
            }
            &::before {
              position: absolute;
              top: 0;
              left: 0px;
              width: 0;
              height: 0;
              content: '';
              border-right: 22px solid transparent;
              border-top: 11px solid transparent;
              border-bottom: 11px solid #021b46;
            }
          }
          &:nth-child(1) {
            .name {
              background: linear-gradient(
                90deg,
                #b7262a 0%,
                rgba(209, 41, 41, 0) 100%
              );
            }
          }
          &:nth-child(2) {
            .name {
              background: linear-gradient(
                90deg,
                #d97625 0%,
                rgba(217, 118, 37, 0) 100%
              );
            }
          }
          &:nth-child(3) {
            .name {
              background: linear-gradient(
                90deg,
                #ffc349 0%,
                rgba(255, 195, 73, 0) 100%
              );
            }
          }

          .risks {
            height: 14px;
            width: 20%;
            line-height: 14px;
            font-size: 14px;
            color: #fff;
            margin-right: 10%;
          }
          .present {
            height: 14px;
            width: 20%;
            line-height: 14px;
            font-size: 14px;
            color: #fff;
          }
        }
      }
    }
  }
}
.riskBotTitle {
  .outTitles {
    &:last-child {
      background: none;
    }
  }
  .outTitles .outTitlesNum {
    span {
      color: #1ac9ff !important;
      font-size: 14px !important;
    }

    img {
      display: inline-block;
      width: 16px;
      height: 12px;
      margin-left: 10px;
    }
  }
}
</style>
